<template>
  <div class="container">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="getItem"
        :data-shape="item.shape"
        :data-type="item.type"
        :data-size="item.size"
        :draggable="!item.disabled"
        @dragstart="handleDragstart"
        @dragend="handleDragEnd($event, item)"
      >
        <span
          class="pannel-typeIcon wy-icon eleIcon"
          :class="[item.image, { disable: item.disabled }]"
        />
        <span :class="[{ disable: item.disabled }]">{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ts, ifs, N_oFlowchart, vue } from './config';

@T_srv.comp
export default class ruleGraphItem extends vue {
  @T_srv.prop({ type: Array, required: true, default: [] }) list: Array<
    N_oFlowchart.I_item
  >;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_offsetX: number = 0;

  private G_offsetY: number = 0;

  private G_compID: string;

  // private G_list: any = cf.list;

  private G_listMap = new Map();

  created() {
    this.GT_compBoxInfo = this.compBoxInfo;
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_compBox.addCompMergeName(this.G_compID, `item`, this);
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, `item`);
  }

  mounted() {
    for (const obj of this.list) {
      const o: any = obj;
      this.G_listMap.set(o.codeNo, obj);
    }
  }

  setItemDisabled(codeNo: string, s: boolean) {
    if (this.G_listMap.has(codeNo)) {
      this.G_listMap.get(codeNo).disabled = s;
    }
  }

  setItemDisabledAll(s: boolean) {
    for (const [key, value] of this.G_listMap) {
      this.G_listMap.get(key).disabled = s;
    }
  }

  handleDragstart(e) {
    this.G_offsetX = e.offsetX;
    this.G_offsetY = e.offsetY;
  }

  handleDragEnd(e, item) {
    const data: any = {};
    const L_page = this.GT_compBox.getCompMergeName(this.G_compID, `page`);
    const L_editor = this.GT_compBox.getCompMergeName(this.G_compID, `editor`);
    const L_graph = this.GT_compBox.getCompMergeName(this.G_compID, `graph`);
    Object.assign(data, item);
    data.offsetX = this.G_offsetX;
    data.offsetY = this.G_offsetY;
    if (L_page) {
      // const size = e.target.dataset.size.split("*");
      // 将视口坐标转换为屏幕/页面坐标
      const xy = L_graph.getPointByClient(e.x, e.y);
      data.x = xy.x;
      data.y = xy.y;
      data.size = item.size.split('*');
      data.type = 'node';
      // 新建节点
      L_editor.executeCommand('add', [data]);
    }
  }
}
</script>

<style scoped lang="scss">
.itempannel {
  height: 100%;
  position: absolute;
  left: 0px;
  z-index: 2;
  background: #f7f9fb;
  width: 200px;
  padding-top: 8px;
  border-right: 1px solid #e6e9ed;
}
.itempannel ul {
  padding: 0px;
  /* padding-left: 16px; */
}
.itempannel li {
  color: rgba(0, 0, 0, 0.65);

  border-radius: 4px;
  /* width: 130px; */
  /* width: 100%;
  height: 28px; */
  line-height: 42px;
  /* padding-left: 6px; */
  border: 1px solid rgba(0, 0, 0, 0);
  list-style-type: none;
}
.itempannel li:hover {
  background: white;
  border: 1px solid #ced4d9;
  cursor: move;
}
.container {
  padding: 5px;
}

.container .disable {
  color: rgba(0, 0, 0, 0.25);
}

.itempannel .pannel-type-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.getItem {
  overflow: hidden;
}
.container li {
  text-align: left;
  padding-left: 12px;
}
.container ul {
  white-space: nowrap;
}
.eleIcon {
  margin-right: 6px;
}
</style>
